import React, { Component } from 'react';
import PropTypes from 'prop-types';
import SettingStyle from '@/page/setting/setting.scss';

class AccountTable extends Component {
    state = { visible: false };
    static propTypes = {
        columns: PropTypes.array.isRequired,
        dataSource: PropTypes.array
    };
    render() {
        const { columns, dataSource } = this.props;
        let ths = columns.map(val => {
            return <th key={val.dataIndex}>{val.title}</th>
        });
        let tds = dataSource.map((val, index) => {
            return (
                <tr key={index}>{
                    columns.map((val2, index2) => {
                        const dataIndex = val2.dataIndex || index2;
                        const record = val;
                        const text = record[dataIndex];
                        const ele = typeof val2.render === 'function' ? val2.render(text, record, dataIndex) : text;
                        return <td className={ SettingStyle['account-name-and-mail'] } key={`${index}.${dataIndex}`}>{ele}</td>
                    })
                }</tr>
            );
        });
        if (dataSource.length == 0) {
            tds = <tr><td colSpan={columns.length} align="middle">暂无数据</td></tr>
        }
        return (
            <div className={SettingStyle['account-table']}>
                <table>
                    <thead />
                    <tbody>
                        {tds}
                    </tbody>
                </table>
            </div>
        );
    }
}

export default AccountTable;